<template>
  <div class="">
    <!-- <eheader></eheader> -->
      <div class="header">
        <x-header
            :left-options="{showBack: true}"
            @on-click-more="addProject">
            <a slot="right" v-show="showIndex" class="iconfont icon-jia add" @click="showLog=false;showIndex=false;"></a>
            <span class="overTitle" slot="overwrite-title">{{title}}</span>
        </x-header>
      </div>

<div class="content_box">
  <div class="projectList" v-if="showList">
        <div class="projectListContent" >
            <div class="titleCell cell">
                <p>项目名称</p>
                <p>参与人</p>
                <p>花费时间</p>
                <p>添加时间</p>
            </div>
            <div class="cell listInfo">
              <div slot="" class="contentCell" v-for="item in projectList" @click="getProjectDetail(item.id) "  >
                <p>{{item.title}}</p>
                <p>{{item.ralname}}</p>
                <p>{{item.spendtime}}</p>
                <p>{{item.addtime}}</p>
              </div>
            </div>
        </div>
      </div>

      <div class="proLog" v-show='showIndex'>
        <search
          v-model="searchText"
          position="absolute"
          auto-scroll-to-top top="46px"
          ref="search">
        </search>

        <ul class="projectContent">
          <li class="projectList" >
            <div class="cradItem">
              <h4 class="title" v-text="proInfo.title"></h4>
              <div class="time" v-text="proInfo.addtime ">2017年9月18日</div>

              <h4 class="item_title">工作时长</h4>
              <div class="worktime" >{{proInfo.spendtime}}小时</div>

              <h4 class="item_title">工作内容</h4>
              <div class="workdetail" v-text="proInfo.connect">完成CRM管理UI 界面部分 ，切图给前端对接</div>

            </div>
          </li>
        </ul>
      </div>

      <div class="proWite" v-show="!showLog">
        <group >
          <calendar v-model="day"  title="选择日期" disable-past></calendar>
          <popup-picker title="项目名称" :data="nameListVal" v-model="projectNameList" e ></popup-picker>
          <x-input title="工作时长(/小时）" text-align="right" required label-width="160px" placeholder="请输入项目时长"  type="number"  v-model="projectTime" :min="0" :max="2" @on-change="verifyInfo"></x-input>
          <x-textarea title="工作内容" label-width="160px" show-counter  :max="1000" :rows="10" placeholder="填写今天的工作" v-model="projectDetail"></x-textarea>
        </group>

        <div class="save"><x-button type="primary" @click.native="addProject">保存</x-button></div>
      </div>






</div>
      

    <!-- <efooter></efooter> -->
  <tabbar>
    <tabbar-item :selected = 'true' @on-item-click="proLog">
        <span slot="icon" class="iconfont icon-xiangmuguanli tabbarIcon"></span>
        <span slot="label">项目日志</span>
    </tabbar-item>
    <tabbar-item @on-item-click="ProWit"> <!-- show-dot -->
        <span slot="icon" class="iconfont icon-yuangongguanli tabbarIcon"></span>
        <span slot="label">项目填写</span>
    </tabbar-item>
  </tabbar>

  </div>

</template>

<script>
import { Tabbar, TabbarItem,Search,XHeader,XInput,Group,XButton,Box,XTextarea,Cell,Calendar,Picker,PopupPicker    } from 'vux'


export default {
  name:"porjectlist",
  components: {
  	Tabbar,
    TabbarItem,
    Search,
    XHeader,
    XInput,Group,XButton,Box,XTextarea,Cell,Calendar,
    Picker ,
    PopupPicker,

  },
  data () {
    return {
      searchText:'',
      title:'项目日志',
      shows:true,
      value6:[{
        name: '中国',
        value: 'china',
        parent: 0
      }, {
        name: '美国',
        value: 'USA',
        parent: 0
      }],
      proInfo:
        {
          title:'计算器',
          addtime:'2017年09月18日',
          spendtime:'6小时',
          workdetail:'完成CRM管理UI界面部分，切图给前端，和前端对接'
        },
      id:"1",
      url:"project/proilent_info?id=",
      testUrl:'',
      userInfo:{
        projeid: '1',
        uid:'1'
      },
      projectList:[
      {title:"标题",user:"自己",time:'5',addtime:"2017-12",id:'12'},
      {title:"标题2",user:"自己1",time:'52',addtime:"2017-12",id:'13'}
      ],
      showList: true,
      showIndex:false,

      showBack:false,
      showLog:true,

      projectNameId:'1',
      projectTime:'',
      projectDetail:'',
      day:'TODAY',
      projectNameList:[],
      nameListVal:[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      showName:true,
      addProName:'',
      currentId:'',
      timestamp:'',

      getListUrl:'/project/proilent_list',
      getProDetail:'/project/proilent_info',
      addProUrl:'/pro/journal',
      getProNameUrl:'/Project/celint_project',



      projeid:'',
      worktime:'',
      task:'',
      token:'',


    }
  },
  methods: {
    //获取自己项目列表
    getProjectList: function(){
      var _this = this
      var url=this.getListUrl
      this.$http.post(
        url,
        {
          lotoken:_this.token
        }
        ).then(function(res) {
        var res = res.data;
        //_this.projectList = res.data
        if(res.code==1){
          _this.projectList=res.data;
          _this.hideLoading();
        }else{
          _this.toastMsg(res.code);
        }
      })
    },
    //获取项目详情
    getProjectDetail: function(id){
      var _this = this;
      this.showList=false;
      this.showIndex=true;
      this.currentId=id;
      var data={id:id}
      var url = this.getProDetail;
      this.$http.post(url,data).then(function(res) {
        var res = res.data;
        _this.hideLoading();
        if(res.code==1){
          _this.proInfo=res.data;
          //时间戳转换为时间
          var timestamp =  _this.proInfo.addtime;
          var newDate = new Date();
          newDate.setTime(timestamp * 1000);
          var data = newDate.toLocaleDateString()
          _this.proInfo.addtime=data;

        }else{
          _this.toastMsg(res.msg);
        }
      })


    },
    //添加项目
    addProject:function(){
      var _this =this;
      var url=this.addProUrl;
      var id= this.projectNameList.join()
      if(id==""||this.projectTime==""||this.projectDetail==""){
        _this.toastMsg("请补全信息")

      }else{
        var data={
          login_secury:this.token,
          projeid:id,
          worktime:this.projectTime,
          task_expound:this.projectDetail
        }
        this.$http.post(url,data).then(function(res) {
          var res=res.data;
          if(res.code==200){
            _this.toastMsg(res.msg);
            _this.getProjectList();
            _this.showLog=true;
            _this.showList=true;
            _this.showIndex=false;

          }else{
            _this.toastMsg(res.msg);
          };

        })
        .catch(function(err){
          _this.toastMsg(err);
        })
      }

    },
    //获取项目名称列表
    getProjectName: function(){
      var _this =this;
      var url=this.getProNameUrl;
      var token = this.token
      var data={
        lotoken:token
      }
      this.$http.post(url,data).then(function(res) {
        var res=res.data;
        if(res.code==1){
          _this.nameListVal=[res.data];
        }else{
          _this.toastMsg(res.msg)
        };

      })
      .catch(function(err){
        _this.toastMsg(err);
      })
    },
    //点击列表获取项目详情
    Pdetail: function(id){
      this.currentId=id;

    },
    ProWit: function(){
      this.showLog=false;
      this.showBack=true;
      this.showList=false;
      this.showIndex=false;
    },
    proLog: function(){
      this.showLog=true;
      this.showList=true;
      this.showIndex=false;

    },
    verifyInfo: function(){


    },
    //时间戳转换为时间
    tiemramp:function(timestamp) {
      // 将当前时间换成时间格式字符串

      var newDate = new Date();
      newDate.setTime(timestamp * 1000);
      var data = newDate.toLocaleDateString()
      this.data=data;
      _this.proInfo.spendtime=data;
    },
    getCooke: function(){
      var _this =this;
      var token =  this.getCookie("token");
      _this.token = token;
    }
  },
  computed:{


  },
  mounted: function() {
    this.showLoading("加载中……");
   this.getCooke();
   this.getProjectList();
   this.getProjectName();
  }

}
</script>

<style scoped lang='less'>
@back-bule:#38ADFF;
@gray-text:#7D8790;

.content_box{
  background-color: white;
  height: 80vh;
  margin-top: 45px;
  overflow: hidden;
}


 .cell {
        display: flex;
    }
    .titleCell p {
        flex: 1;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #38ADFF;
        border-bottom: 2px #38ADFF solid;
        padding: 5px;
    }
.projectListContent{
  
  .titleCell{
    display: flex;
    .titleCell p{
      flex:1;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #38ADFF;
      border-bottom: 2px #38ADFF solid;
      padding: 5px;
    }
  }
  
  .listInfo{
    display: block;
    .contentCell{
      display: flex;
      p{
        flex:1;
        text-align: center;
        border-bottom: 2px #E4E4E4 solid;
        height: 40px;
        line-height: 40px;
        padding: 5px;
        color: #333333;
      }
    }
  }
}



.header{
  .overTitle{
      display: inline-block;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 40px;
  }
}
.add{
    color: @back-bule;
    display: inline-block;
    height: 30px;
    width: 40px;
    text-align: right;
    font-size: 20px;
}
.projectContent{
  margin: 20px 5px;
  color:#fff;
  .projectList{
    margin-bottom: 20px;
    .cradItem{
      background-color: #38ADFF;
      border-radius: 5px;
      padding:15px;
      .title{
        font-size: 26px;
      }
      .time{
        font-size: 13px;
        color:#ececec;
        margin-bottom: 20px;
      }
      .item_title{
        font-size: 16px;
        color: #ECECEC ;
        margin-top: 10px;
      }
      .worktime,.workdetail{
        font-size: 15px;
        margin-top: 5px;
      }
    }

  }
}



.data-day{
  text-align: center;
}

.weui-cells {
  margin-top: 0 !important;
}
.weui-cells {
    margin-top: 0;
    background-color: #red;
    line-height: 1.41176471;
    font-size: 17px;
    overflow: hidden;
    position: relative;
}

.choice_day{
  padding: 10px 15px;
  text-align: center;
}
.days{
  color: #666;
  font-size: 13px;
}
.save{
  margin: 40px 13px 0;
  padding-bottom: 40px;

}
.weui-cell_access .weui-cell__ft{
  text-align: center !important;
}

.vux-cell-primary {
    padding-right: 13px;
    position: relative;
    text-align: center !important;
}
 .vux-header{
  background-color: #f7f7f7 !important;
}



</style>
